<template>
    <div class="searchList">
        <item v-for="item in list" :class="{'active' : activeObj.id == item.id }" :key="item.id" :apiValue="item"
            :changeEvent="changeActive"></item>
    </div>
</template>
<script>
    import item from './searchItem'

    export default {
        components: {
            item
        },
        data() {
            return {
                activeObj: {},
                list: [],
            }
        },
        mounted() {
            var type = ['get', 'post', 'put', 'delete'];
            for (let i = 1; i < 41; i++) {
                this.list.push({
                    id: i,
                    title: i,
                    type: type[i % 4],
                    url: '/url',
                });
            }
        },
        methods: {
            changeActive(obj) {
                this.activeObj = obj;
                this.$store.dispatch('ApiActive/setActiveId', obj.id);
            },
        },
    }
</script>